<!--  -->
<template>
  <div class="setting-wrap">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="() => this.$router.push('/')"></span>
      </div>
      <span class="course-title">设置</span>
      <span class="blank"></span>
    </div>
    <div class="setting-center">
      <div class="setting-content">
        <div class="select-local-voice">
          <img src="~assets/home/local.png" alt="" /> <span>选择发音</span>
          <a-radio-group
            v-model="type"
            class="check-group"
            @change="localVoiceChange"
          >
            <a-radio value="en">英音</a-radio>
            <a-radio value="am">美音</a-radio>
          </a-radio-group>
        </div>
        <div class="line"></div>
        <div class="select-sex-voice">
          <img src="~assets/home/voice.png" alt="" /> <span>发音人</span>
          <a-radio-group
            class="check-group"
            v-model="sex"
            @change="localSexVoiceChange"
          >
            <a-radio value="1">男声</a-radio>
            <a-radio value="2">女声</a-radio>
          </a-radio-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Radio } from "ant-design-vue";
import {mapMutations} from 'vuex'
import { userSetlanguage, upsetSex } from "@/services/home";
import { SUCCESS_CODE } from "@/utils/const";
const loginInfo = JSON.parse(window.localStorage.getItem("vuexStoragePad"));
const { userInfo } = loginInfo;
export default {
  name: "setting",
  components: {
    ARadio: Radio,
    ARadioGroup: Radio.Group,
  },
  data() {
    return {
      type: userInfo.language,
      sex: "" + userInfo.sex_voice,
    };
  },
  computed: {},
  methods: {
    ...mapMutations(['setLogin']),
    localVoiceChange() {
      // let val = e.target.value
      userSetlanguage({
        type: this.type,
      })
        .then((res) => {
          if (res.code === SUCCESS_CODE) {
            userInfo.language = this.type
            this.setLogin(loginInfo)
            this.$message.success("设置成功");
          } else {
            this.$message.error("设置失败");
          }
        })
        .catch(() => {
          this.$message.error("设置失败");
        });
    },
    localSexVoiceChange() {
      console.log(this.sex);
      upsetSex({
        sex_voice: this.sex,
      })
        .then((res) => {
          if (res.code === SUCCESS_CODE) {
            userInfo.sex_voice = this.sex
            this.setLogin(loginInfo)
            this.$message.success("设置成功");
          } else {
            this.$message.error("设置失败");
          }
        })
        .catch(() => {
          this.$message.error("设置失败");
        });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.setting-wrap {
  height: 100%;
  .chose-course-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    position: relative;
    .header-left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: absolute;
      left: 40px;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("~assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      flex: 1;
      font-weight: 700;
      font-size: 20px; /* no */
      font-weight: 700;
    }
  }
  .setting-center {
    height: calc(100% - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    .setting-content {
      width: 800px;
      padding: 80px 65px;
      background-color: #fff;
      border-radius: 10px; /* no */

      .check-group {
        display: block;
        margin-top: 20px;
      }
      .line {
        height: 1px; /* no */
        background-color: #e0e0e0;
        margin: 64px 0;
      }
      .select-local-voice,
      .select-sex-voice {
        .text-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        img {
          width: 30px; /* no */
          vertical-align: text-bottom;
          margin-right: 10px;
        }
        span {
          font-size: 20px; /* no */
          font-weight: 700;
          color: #111111;
        }
      }
    }
  }
}
</style>
